<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-input
          v-model="listQuery.type"
          placeholder="字典类型"
          style="width: 200px; margin-right: 10px; margin-top: 10px"
          @keyup.enter.native="handleFilter"
        />

        <el-button
          v-waves
          type="primary"
          style="margin-top: 10px"
          plain
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          type="primary"
          plain
          style="margin-top: 10px"
          icon="el-icon-plus"
          @click="handleAdd"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table
        v-loading.body="!listLoading"
        :header-row-style="{ height: '70px' }"
        :header-cell-style="{
          color: '',
          fontSize: '',
          backgroundColor: '#dfe6ec',
        }"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column
          label="序号"
          width="50px"
          align="center"
          type="index"
          show-overflow-tooltip
        />
        <el-table-column label="字典类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>

        <el-table-column label="配置名字" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.keyName }}</template>
        </el-table-column>

        <el-table-column
          label="配置展示名字"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.keyLabel }}</template>
        </el-table-column>

        <el-table-column
          label="配置展示值"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.keyValue }}</template>
        </el-table-column>

        <el-table-column
          label="展示顺序"
          prop="showOrder"
          align="center"
          width="90px"
          show-overflow-tooltip
        />

        <el-table-column
          label="备注"
          prop="remark"
          align="center"
          width="200px"
          show-overflow-tooltip
        />

        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDel(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="9"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible1"
      width="800px"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="commonInfo"
        label-width="120px"
      >
        <el-form-item label="字典类型:" prop="type">
          <el-input
            v-model="commonInfo.type"
            style="width: 350px"
            placeholder="请输入字典类型"
          />
        </el-form-item>
        <el-form-item label="配置名字:" prop="keyName">
          <el-input
            v-model="commonInfo.keyName"
            style="width: 350px"
            placeholder="请输入配置名字"
          />
        </el-form-item>
        <el-form-item label="配置展示名字:" prop="keyLabel">
          <el-input
            v-model="commonInfo.keyLabel"
            style="width: 350px"
            placeholder="请输入配置展示名字"
          />
        </el-form-item>
        <el-form-item label="配置展示值:" prop="keyValue">
          <el-input
            v-model="commonInfo.keyValue"
            style="width: 350px"
            placeholder="请输入配置展示值"
          />
        </el-form-item>
        <el-form-item label="展示顺序:" prop="showOrder">
          <el-input-number
            v-model="commonInfo.showOrder"
            style="width: 350px"
            placeholder="请输入展示顺序"
          />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            autosize
            v-model="commonInfo.remark"
            style="width: 350px"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelData('form')"
          >取 消</el-button
        >
        <el-button
          v-if="dialogStatus === 'create'"
          type="primary"
          plain
          @click.native.prevent="createData('form')"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          plain
          @click.native.prevent="updateData('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HzFileUpload from "@/custom/HzFileUpload";
import HzImgUpload from "@/custom/HzImgUpload";
import HzImg from "@/custom/HzImg";
import HzLink from "@/custom/HzLink";
import waves from "@/directive/waves"; // waves directive
import {
  fetchList,
  saveObj,
  updateObj,
  uploads,
  delObj,
  getObj,
} from "@/api/system/dict";

//importDictOptions

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Common",
  directives: {
    waves,
  },
  components: {
    HzFileUpload,
    HzImgUpload,
    HzImg,
    HzLink,
  },
  data() {
    return {
      dateFil: [],
      selectGroup: null,
      showExportPanel: false,
      exportType: "",
      commonInfo: {},
      options: [],
      loading: false,
      dialogFormVisible1: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      name: "",
      list: [],
      total: 0,
      importPanel: false,
      importLoading: null,
      listLoading: false,
      exportTitle: "",
      extra: {}, //额外参数(用于格式化)
      booleanOptions: [
        { name: "是", value: true },
        { name: "否", value: false },
      ],

      //dictOptions

      groups: [],
      listQuery: {
        needExtra: true,
        currentPage: 1,
        pageSize: 10,
      },
      rules: {},
    };
  },
  created() {
    this.getList();
    //initDictOptions
  },
  activated() {},

  mounted() {},
  methods: {
    //initDictOptionFunction
    //initSelectFunctions

    handleAdd() {
      this.commonInfo = {};
      this.dialogFormVisible1 = true;
      this.dialogStatus = "create";
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.getList();
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleUpdate(row) {
      this.commonInfo = { ...row };
      this.dialogStatus = "update";
      this.dialogFormVisible1 = true;
    },
    updateData() {
      delete this.commonInfo.createTime;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    cancelData() {
      this.commonInfo = {};
      this.dialogFormVisible1 = false;
      this.$refs["dataForm"].resetFields();
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delObj({ ids: row.id }).then((res) => {
          if (res.statusCode === 8201) {
            this.handleFilter();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000,
            });
          }
        });
      });
    },
    getList() {
      this.listLoading = false;
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.extra = response.extra;

        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
  },
};
</script>
<style></style>
